<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="css/amazeui.min.css"/>
<link rel="stylesheet" href="default/style.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/amazeui.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/normal-config.js"></script>
    <link rel="stylesheet" href="layui/css/layui.mobile.css">
    <script src="layui/layui.all.js"></script>



</head>

<body>
<div class="container">
	<header  style="background-color:#1a1a1a;" data-am-widget="header" class="am-header am-header-default my-header">
      <div class="am-header-left am-header-nav">
        <a href="index.html" class="">
          <i class="am-header-icon am-icon-chevron-left" style="    font-size: 1px;" ></i>
        </a>
      </div>
      <h1 class="am-header-title">
        <a href="javascript:void (0)"  class="" style="font-size: 16px;font-family: '微软雅黑';">用户注册</a>
      </h1>
      <div class="am-header-right am-header-nav">
        <a href="index.html" class="">
          <i class="am-header-icon  am-icon-home"></i>
        </a>
      </div>
    </header>
    <div class="cart-panel">
		<form class="am-form">
            <span id="checkName" style="height:15px;font-size: 12px;font-family: 楷体;color: red;margin-left: 30px">用户名</span>
            <div class="am-form-groupClient am-form-icon">
                <i class="am-icon-user" style="color:#329cd9"></i>
                <input type="text"  id="name" class="am-form-field  my-radius" placeholder="请输入您的用户名">
            </div>
            <div class="am-form-groupClient am-form-icon">
                <i class="am-icon-user" style="color:#329cd9"></i>
                <input type="text" id="nickname"  class="am-form-field  my-radius" placeholder="请输入您的昵称">
            </div>
            <!--<span id="checkPassword" style="height:15px;font-size: 12px;font-family: 楷体;color: red;margin-left: 30px">用户名</span>-->

            <div class="am-form-groupClient am-form-icon">
                <i class="am-icon-lock" style="color:#329cd9"></i>
                <input type="password" id="password" class="am-form-field  my-radius" placeholder="请输入您的密码">
            </div>
            <div class="am-form-groupClient am-form-icon">
                <i class="am-icon-lock" style="color:#e9c740"></i>
                <input type="password" id="rePassword" class="am-form-field  my-radius" placeholder="请重复输入一次密码">
            </div>
            <div class="am-form-groupClient am-form-icon">
                <i class="am-icon-envelope" style="color:#78c3ca"></i>
                <input type="text" id="email" class="am-form-field  my-radius" placeholder="请输入邮箱号码">
            </div>
            <div class="am-form-groupClient am-form-icon">
                <i class="am-icon-phone" style="color:#f09513"></i>
                <input type="text" id="phone" class="am-form-field  my-radius" placeholder="请输入联系电话">
            </div>
            <div class="am-checkbox">
              <label>
                <input type="checkbox" id="agree"> 我已阅读并同意<a href="#">《协议》</a>
              </label>
            </div>
            <p class="am-text-center"><button type="button" id="sub" style="background-color:#19ce8b " class="am-btn am-btn-danger am-radius am-btn-block">立即注册</button></p>
        </form>

        <div style="" class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">正在载入...</div>
                <div class="am-modal-bd">
                    <span class="am-icon-spinner am-icon-spin"></span>
                </div>
            </div>
        </div>
        <button
                type="button"
                class="am-btn am-btn-success"
                data-am-modal="{target: '#my-modal-loading'}">
            Modal Loading
        </button>
    </div>
    
    <footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
        <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
      <div class="am-footer-miscs ">
        <p>CopyRight©2014 AllMobilize Inc.</p>
        <p>京ICP备13033158</p>
      </div>
    </footer>
    <!--底部-->
    <div data-am-widget="navbar" class="am-navbar am-cf my-nav-footer " id="">
      <ul class="am-navbar-nav am-cf am-avg-sm-4 my-footer-ul">
        <li>
          <a href="/wap/" class="">
            <span class="am-icon-home"></span>
            <span class="am-navbar-label">首页</span>
          </a>
        </li>
        <li>
          <a href="###" class="">
            <span class=" am-icon-phone"></span>
            <span class="am-navbar-label">电话</span>
          </a>
        </li>
        <li>
          <a href="###" class="">
            <span class=" am-icon-comments"></span>
            <span class="am-navbar-label">聊天</span>
          </a>
        </li>



      </ul>
      <script>
          new Global.Self({
              userInfo:{
                name:"",
                password:"",
                email:"",
                phone:"",
                nickname:""
              },
              mounted: function () {
                  var that=this;
                  $("#sub").click(function () {
                      that.checkPhone();
                      if ($('#agree').is(':checked')==false){
                          alert("请阅读协议");
                          return;
                      }else {
                          that.register();
                      }
                  });
                  $('#nickname').click(function () {
                     that.checkName();
                  });
                  $('#phone').click(function () {
                      that.checkEmail();
                  })

              },
              /**
               * 注册
               */
              register: function () {
                  var self=this;
                  self.userInfo.name=$("#name").val();
                  self.userInfo.email=$("#email").val();
                  self.userInfo.password=$("#password").val();
                  self.userInfo.phone=$("#phone").val();
                  self.userInfo.nickname=$("#nickname").val();
                  var  index=layer.load(1);
                  Global.service.register(self.userInfo, function (data) {
                  layer.close(index);

                      //ajax回调成功后执行的方法
                   window.location.href="login.html";
                  }, function (err) {
                        alert("注册失败");
                  })
              },
              /**
               * 校验name
               */
              checkName:function () {
                  var names=$('#name').val();
                  Global.service.checkName({"name":names},function (data) {
                  },function (err) {
                      layer.msg(err.message);
                  })
              },
              /**
               * 校验phone
               */
              checkPhone:function () {
                  var phones=$('#phone').val();
                  Global.service.checkPhone({"phone":phones},function (data) {
                  },function (err) {
                      layer.msg((err.message);
                  })
              },
              /**
               * 校验email
               */
              checkEmail :function () {
                  var emails=$('#email').val();
                  Global.service.checkEmail({"email":emails},function (data) {
                  },function (err) {
                      layer.msg((err.message);
                  })
              }
          });


	  	function showFooterNav(){
			$("#footNav").toggle();
		}
	  </script>
    </div>
</div>
</body>
</html>
